<template>
  <div class="box-mid2" ref="parent" :style="chartsDom">
    <div class="box-title ">
        <div class="peo-num box-mid2">
            <div>人口总数</div>
            <div :style="`color:rgb(247,204,3);font-size:${fontSize}px;font-weight:bold;margin:5px 0 0 0`">1,232</div>
        </div>
        <div class="news box-mid2">
            <div>政策新闻</div>
            <div :style="`color:rgb(247,204,3);font-size:${fontSize}px;font-weight:bold;margin:5px 0 0 0`">986</div>
        </div>
    </div>
  </div>
</template>
<script>
import { getCompanyIn } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: null,
      listData:'',
      jz:true,
      fontSize:this.height/4

    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val + 'px',
        height: this.height-10 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    
    this.$nextTick(_=>{
     this.init()
    })
  },
  methods: {
    init(){
      this.jz=false
    },
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px;
  .box_item{
      display flex
      justify-content center
      align-items center
      padding 5px 0
      box-sizing border-box
  }
  .box-title{
      width 80%
      height 100%
      box-sizing border-box
      border-radius 30px
      display flex
      position relative
  }
  .box-title::before{
      content ''
      position absolute
      width 45%
      height 30%
      border-radius 40px 0 0 0
      border-top:20px solid rgba(181,20,68,.7)
      border-left:20px solid rgba(181,20,68,.7)
      top:0
      left:5%
      z-index 100
  }
  .box-title::after{
      content ''
      position absolute
      width 45%
      height 30%
      border-radius  0 40px 0 0
      border-top:20px solid rgba(181,20,68,.7)
      border-right:20px solid rgba(181,20,68,.7)
      top:0
      right:5%
      z-index 100
  }
  .box-mid2{
      display flex
      justify-content center
      align-items center
      flex-direction column
  }
  .peo-num,.news{
      width 50%
      height 100%
  }
</style>